<template>
  <div class="item-detail flex column">
    <div class="item-title">滑动组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="商品ID">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_goods" @click.native="tapInput(0)" placeholder="请选择商品"></Input>
          </div>
        </FormItem>
        <FormItem label="开启更多">
  	      <div class="flex center">
  	        <Select v-model="detailData.json.more.display" class="select-wrapper">
  	          <Option value="false">关闭</Option>
  	          <Option value="true">开启</Option>
  	        </Select>
  	      </div>
  	    </FormItem>
  	    <template v-if="detailData.json.more.display=='true' " >
  	    	<FormItem label="跳转类型">
  	          <div class="flex center">
  	            <Select v-model="detailData.json.more.skip_type" @on-change="chageSel" class="select-wrapper">
  	              <Option value="good">商品</Option>
  	              <Option value="label">微页面</Option>
  	            </Select>
                <div class="input-wrapper">
                   <Input style="width: 200px;" v-model="detailData.json.more.skip_url" @click.native="tapInput(1)" placeholder="请输入商品ID或微页面ID">{{detailData.json.more.skip_url}}</Input>
                </div>
  	           
  	          </div>
  	        </FormItem>
  	    </template>
	    
      </Form>
    </div>

    <!-- 商品选择器 -->
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="selectNum" :goodsIdStr="goodsIdStr" ref="goodsModal"></goodsSelect>
    <!-- 微页面选择器 -->
    <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'

export default {
  name: 'SliderDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  computed: {
    goodsIdStr: function () {
        if (this.selectNum == 0) {
          // 多选商品
            return this.detailData.label_goods;
        } else if (this.detailData.json.more.skip_type == "good") {
          // 跳转商品
            return this.detailData.json.more.skip_url;
        }
    }
  },
  data() {
    return {
      // 裁剪图片索引
      cropIndex: 0,
      // 跳转索引
      jumpIndex: 0,
      // 选择商品数
      selectNum: 0
	   }
  },
  methods: {

    tapInput(selectNum) {
    	this.selectNum = selectNum;
      if (selectNum == 0) {
        this.openGoodsSelectFn();
      } else {
        if (this.detailData.json.more.skip_type == "good") {
          this.openGoodsSelectFn();
        } else {
           // 打开微页面选择器
          this.$refs.micropageModal.show();
        }
      }
  		
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },

    // 选中商品回调
    commitGoodsFn(_id){
    	if (this.selectNum == 0) {
    		// 多选商品
        	this.detailData.label_goods = _id;
    	} else {
    		// 跳转商品
	        this.detailData.json.more.skip_url = _id;
          this.detailData.json.more.path='app/mall/item/item?goodsId='+_id;
    	}
    },

     // 选中微页面回调
    chosePages(ids) {
        this.detailData.json.more.skip_url = ids[0];
        this.detailData.json.more.path='app/mall/label/label?labelId='+ids[0];

    },

    /*
    * 选择器
    */
    chageSel(){
       this.detailData.json.more.skip_url='';
       this.detailData.json.more.path='';
    },
    
  },

  created() {

  },

  components: {
  	goodsSelect,MicropageSelect
  }
}

</script>

<style scoped>

@import url("../baseModule.less");

.item-content {
	padding: 16px;
}

select {
    height: 34px;
    width: 80px;
    margin-right: 8px;
    padding-left: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

</style>
